<template>
	<jk-dialog
		v-model="saveDialogState"
		title="数据权限"
		width="900px"
		:confirm-btn-loading="confirmBtnLoading"
		:show-content-loading="showContentLoading"
		@on-confirm="onConfirmButton"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div ref="box1" class="avatar-info">
			<el-avatar size="medium" icon="el-icon-user-solid"></el-avatar>
			<span class="">{{ targetName }}</span>
		</div>
		<el-row :gutter="14">
			<el-col :span="8">
				<div class="permission-option-item workshop-card-style">
					<span class="permission-option-item-title">区域权限</span>
					<jk-table ref="jkTable" stripe border="none" :height="400" class="width-100-percent" :data="workshopList">
						<vxe-table-column field="name" title="名称" :min-width="100" />
						<vxe-table-column align="center" title="可见" fixed="right" width="70">
							<template #default="scope">
								<div class="flex-center">
									<el-checkbox v-model="scope.row.checked" @change="onCheckedChange($event, scope.row, 'workshop')"></el-checkbox>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column align="center" title="默认" fixed="right" width="70">
							<template #default="scope">
								<div class="flex-center">
									<el-checkbox v-model="scope.row.isDefault" @change="onDefaultChange($event, scope.row, 'workshop')"></el-checkbox>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="permission-option-item process-card-style">
					<span class="permission-option-item-title">工序权限</span>
					<jk-table ref="jkTable" stripe :height="400" class="width-100-percent" :data="processList" border="none">
						<vxe-table-column field="name" title="名称" :min-width="100" />
						<vxe-table-column align="center" title="可见" fixed="right" width="70">
							<template #default="scope">
								<div class="flex-center">
									<el-checkbox v-model="scope.row.checked" @change="onCheckedChange($event, scope.row, 'process')"></el-checkbox>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column align="center" title="默认" fixed="right" width="70">
							<template #default="scope">
								<div class="flex-center">
									<el-checkbox v-model="scope.row.isDefault" @change="onDefaultChange($event, scope.row, 'process')"></el-checkbox>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="permission-option-item group-card-style">
					<span class="permission-option-item-title">班组权限</span>
					<jk-table ref="jkTable" stripe :height="400" class="width-100-percent" :data="groupList" border="none">
						<vxe-table-column field="name" title="名称" :min-width="100" />
						<vxe-table-column align="center" title="可见" fixed="right" width="70">
							<template #default="scope">
								<div class="flex-center">
									<el-checkbox v-model="scope.row.checked" @change="onCheckedChange($event, scope.row, 'group')"></el-checkbox>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column align="center" title="默认" fixed="right" width="70">
							<template #default="scope">
								<div class="flex-center">
									<el-checkbox v-model="scope.row.isDefault" @change="onDefaultChange($event, scope.row, 'group')"></el-checkbox>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
			</el-col>
		</el-row>
	</jk-dialog>
</template>
<script>
    import { systemWorkshopPage } from '../../../api/basicData/workshop';
    import {
        systemUserAssignGroup, systemUserAssignProcess,
        systemUserAssignWorkshop, systemUserListUserGroup, systemUserListUserProcess,
        systemUserListUserWorkshop
    } from '../../../api/system/user';
    import { personnelGroupPage } from '../../../api/personnel/group';
    import { spinProcessPage } from '../../../api/technology/process';
    import setDataMixin from '../role/set-data';
    import calHeight from '../../../mixins/cal-dialog-height';
    export default {
        mixins: [setDataMixin, calHeight],
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            targetName: {
                type: String,
                default: ''
            },
            dataId: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                activeTab: '1',
                checked: [],
                workshopList: [],
                showContentLoading: false,
                saveDialogState: false,
                confirmBtnLoading: false,
                groupList: [],
                processList: [],
                checkedProcessArr: [],
                checkedGroupArr: []
            };
        },
        watch: {
            dialogState(newVal) {
                this.saveDialogState = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        },
        methods: {
            async saveRequest() {
                this.confirmBtnLoading = true;
                try {
                    await this.systemUserAssignWorkshopRequest();
                    await this.systemUserAssignGroupRequest();
                    await this.systemUserAssignProcessRequest();
                } catch (e) {
                    this.confirmBtnLoading = false;
                }
                this.$emit('on-confirm');
                this.confirmBtnLoading = false;
            },
            systemUserAssignGroupRequest() {
                let arr = this.groupList.map(x => {
                    x.groupId = x.id;
                    return x;
                });
                arr = arr.filter(x => x.checked);
                arr = arr.map(x => {
                    return {
                        groupId: x.id,
                        isDefault: x.isDefault ? 1 : 0
                    };
                });
                return systemUserAssignGroup({
                    'groups': arr,
                    'userId': this.dataId
                });
            },
            systemUserAssignWorkshopRequest() {
                let arr = this.workshopList.map(x => {
                    x.workshopId = x.id;
                    return x;
                });
                arr = arr.filter(x => x.checked);
                arr = arr.map(x => {
                    return {
                        workshopId: x.id,
                        isDefault: x.isDefault ? 1 : 0
                    };
                });
                return systemUserAssignWorkshop({
                    'workshops': arr,
                    'userId': this.dataId
                });
            },
            systemUserAssignProcessRequest() {
                let arr = this.processList.map(x => {
                    x.processId = x.id;
                    return x;
                });
                arr = arr.filter(x => x.checked);
                arr = arr.map(x => {
                    return {
                        processId: x.id,
                        isDefault: x.isDefault ? 1 : 0
                    };
                });
                return systemUserAssignProcess({
                    'processList': arr,
                    'userId': this.dataId
                });
            },
            // 获得区域列表
            getWorkshopListRequest() {
                return systemWorkshopPage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.workshopList = res.data.res.map(x => {
                            x.checked = false;
                            x.isDefault = false;
                            return x;
                        });
                    }
                });
            },
            // 获得班组集合
            getGroupListRequest() {
                return personnelGroupPage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        const arr = res.data.res || [];
                        this.groupList = arr.map(x => {
                            x.checked = false;
                            x.isDefault = false;
                            return x;
                        });
                    }
                });
            },
            // 获得工序集合
            getProcessListRequest() {
                return spinProcessPage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        const arr = res.data.res || [];
                        this.processList = arr.map(x => {
                            x.checked = false;
                            x.isDefault = false;
                            return x;
                        });
                    }
                });
            },
            getHasWorkshopDataRequest() {
                return systemUserListUserWorkshop({ userId: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        const arr = res.data.res || [];
                        this.workshopList.forEach(x => {
                            arr.forEach(k => {
                                if (x.id === k.workshopId) {
                                    x.checked = true;
                                    if (k.isDefault) x.isDefault = true;
                                }
                            });
                        });
                    }
                });
            },
            getHasGroupDataRequest() {
                return systemUserListUserGroup({ userId: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        const arr = res.data.res || [];
                        this.groupList.forEach(x => {
                            arr.forEach(k => {
                                if (x.id === k.groupId) {
                                    x.checked = true;
                                    if (k.isDefault) x.isDefault = true;
                                }
                            });
                        });
                        this.checkedGroupArr = this.groupList.filter(x => x.checked);
                    }
                });
            },
            getHasProcessDataRequest() {
                return systemUserListUserProcess({ userId: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.processList.forEach(x => {
                            const arr = res.data.res || [];
                            arr.forEach(k => {
                                if (x.id === k.processId) {
                                    x.checked = true;
                                    if (k.isDefault) x.isDefault = true;
                                }
                            });
                            this.checkedProcessArr = this.processList.filter(x => x.checked);
                        });
                    }
                });
            },
            async getDependentData() {
                this.showContentLoading = true;
                await this.getWorkshopListRequest();
                await this.getHasWorkshopDataRequest();
                await this.getGroupListByWorkshopsRequest();
                await this.getProcessListByWorkshopsRequest();
                await this.getHasGroupDataRequest();
                await this.getHasProcessDataRequest();
                this.showContentLoading = false;
            },
            onVisibleChange(e) {
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
                this.$emit('on-visible-change', e);
            },
            onConfirmButton() {
                this.saveRequest();
            }
        }
    };
</script>
<style scoped lang="scss">
    .avatar-info {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 6px;
        font-size: 14px;
    }
    .permission-option-item {
        font-size: 15px;
        border-radius: 4px;
        .permission-option-item-title {
            height: 38px;
            font-size: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px 4px 0 0;
            //margin-bottom: -1px;
        }
    }
    .workshop-card-style {
        border: solid 1px #91d5ff;
        background: #e6f7ff;
        color: #1890ff;
        .permission-option-item-title {
            border-bottom: solid 1px #91d5ff;
        }
    }
    .group-card-style {
        border: solid 1px #d3adf7;
        background: #f9f0ff;
        color: #722ed1;
        .permission-option-item-title {
            border-bottom: solid 1px #d3adf7;
        }
    }
    .process-card-style {
        border: solid 1px #ffbb96;
        background: #fff2e8;
        color: #fa541c;
        .permission-option-item-title {
            border-bottom: solid 1px #ffbb96;
        }
    }
</style>
